<template>
  <div class="personal-center-pc">
    <div class="personal-center-pc-container">
      <div class="user-basic">
        <div class="user-avatar">
          <mu-avatar :size="200">
            <img :src="avatarUrl">
          </mu-avatar>
        </div>
        <ul class="user-info">
          <li class="user-info-card">
            <p class="user-info-card-name">ID</p>
            <p class="user-info-card-value">{{ user.id }}</p>
          </li>
          <li class="user-info-card">
            <p class="user-info-card-name">用户名</p>
            <p class="user-info-card-value">{{ user.username }}</p>
          </li>
          <li class="user-info-card">
            <p class="user-info-card-name">真实姓名</p>
            <p class="user-info-card-value">{{ user.realname }}</p>
          </li>
          <li v-if="!user.is_active" class="user-info-card">
            <p class="user-info-card-name">用户状态</p>
            <p class="user-info-card-value secondary">不可用</p>
          </li>
          <li v-if="user.is_superadmin" class="user-info-card">
            <p class="user-info-card-name">特殊权限</p>
            <p class="user-info-card-value">超级管理员</p>
          </li>
          <li class="user-info-card">
            <p class="user-info-card-name">注册时间</p>
            <p class="user-info-card-value">{{ toDatetimeString(user.register_at) }}</p>
          </li>
          <li class="user-info-card">
            <p class="user-info-card-name">最后登录</p>
            <p class="user-info-card-value">{{ toDatetimeString(user.last_login_at) }}</p>
          </li>
          <li class="user-info-card">
            <p class="user-info-card-name">权限组</p>
            <p class="user-info-card-value" :class="{ secondary: user.role === 0 }">{{ roleText }}</p>
          </li>
        </ul>
      </div>

      <avatar-uploader class="action-item" @refresh="refreshUser()" />
      <change-password class="action-item" />
      <!-- <div class="actions">
      </div> -->
      <mu-button color="error" @click="handleLogout()">登出</mu-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import AvatarUploader from './AvatarUploader'
import ChangePassword from './ChangePassword'
import api from '@/api'
import { parseTime } from '@/util'
import defaultAvatar from '@/assets/default_avatar.jpg'

export default {
  name: 'PersonalCenterPc',
  components: {
    AvatarUploader,
    ChangePassword
  },
  computed: {
    ...mapGetters({
      user: 'currentUser',
      roles: 'roles'
    }),
    roleText() {
      const code = this.user.role
      if (code === 0) {
        return '无隶属'
      } else {
        const role = this.roles.find(it => it.id === code)
        return role ? role.text : '未知组'
      }
    },
    avatarUrl() {
      const user = this.user
      return user.avatar ? user.avatar_url : defaultAvatar
    }
  },
  methods: {
    ...mapMutations({
      setCurrentUser: 'SET_CURRENT_USER'
    }),
    ...mapActions({
      logout: 'logout'
    }),
    // 更新用户信息
    async refreshUser() {
      try {
        const user = await api.getCurrentUser()
        this.setCurrentUser(user)
      } catch (err) {
        this.$apiCatch(err)
      }
    },
    // 登出
    async handleLogout() {
      try {
        await this.logout()
        this.$toast.success('登出成功')
        this.$router.push({ name: 'login-page' })
      } catch (err) {
        this.$apiCatch(err)
      }
    },
    toDatetimeString(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  }
}
</script>

<style scoped>
.personal-center-pc {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.personal-center-pc-container {
  display: inline-flex;
  flex-flow: column nowrap;
  padding: 20px;
}

.user-basic {
  width: 650px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-info {
  list-style: none;
  margin-left: 20px;
}
.user-info-card {
  display: flex;
  width: 240px;
  margin: 6px 0;
}
.is-phone .user-info-card {
  margin: 6px auto;
}
.user-info-card-name {
  box-sizing: border-box;
  text-align: right;
  width: 80px;
  background:#0d47a1;
  padding: 4px 6px;
  border-radius: 4px 0 0 4px;
  color: #fff;
}
.user-info-card-value {
  box-sizing: border-box;
  text-align: left;
  width: 160px;
  background:#1e88e5;
  padding: 4px 6px;
  border-radius: 0 4px 4px 0;
  color: #fff;
}
.user-info-card-value.secondary {
  background:#ff4081;
}

.actions {
  display: flex;
  flex-flow: row wrap;
}
.action-item {
  margin: 12px;
}
</style>
